import React, {Component} from 'react'
import {ThemeColor} from '../../color/ThemeColor'
import {HelpText} from '../HelpText'

interface CustomCheckboxProps {
  id: string
  label: React.ReactNode
  helpText?: React.ReactNode
  checked: boolean
  onChange: (value: boolean) => void
  className?: string
  color: 'green' | 'red' | 'yellow' | 'indigo' | 'blue' | 'gray' | ThemeColor
  hideLabel?: boolean
  disabled?: boolean
  type?: 'checkbox' | 'radio'
}

class CustomCheckbox extends Component<CustomCheckboxProps> {
  render() {
    let {id, label, helpText, checked, onChange, className, color, hideLabel, disabled, type} =
      this.props

    const renderHelpText = (): React.ReactNode => {
      return helpText ? <HelpText className={'ml-x6 mt-0'}>{helpText}</HelpText> : null
    }

    const classNameResult =
      'custom-checkbox ' +
      (type === 'radio' ? 'custom-radio ' : '') +
      'custom-checkbox-' +
      color +
      ' ' +
      'custom-control-input ' +
      (hideLabel ? ' hide-label' : '')

    return (
      <div title={hideLabel ? (label as string) : null} className={className ? className : ''}>
        <div className={'controls'}>
          <input
            id={id}
            type={type ? type : 'checkbox'}
            color={'success'}
            checked={checked}
            disabled={disabled}
            className={classNameResult}
            onChange={() => {
              onChange(!checked)
            }}
          />
          {hideLabel ? (
            ''
          ) : (
            <label
              htmlFor={id}
              className={'ml-x2 custom-control-label ' + (disabled ? 'label-disabled ' : '')}>
              {label}
            </label>
          )}
        </div>
        {renderHelpText()}
      </div>
    )
  }
}

export default CustomCheckbox
